
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
        <meta name="description" content="ESP8266/ESP32 WLAN configuration at run time with web interface">
      
      
        <meta name="author" content="Hieromon Ikasamo">
      
      
        <link rel="canonical" href="https://Hieromon.github.io/AutoConnect/otaserver.html">
      
      
        <link rel="prev" href="otabrowser.html">
      
      
        <link rel="next" href="filesystem.html">
      
      <link rel="icon" href="assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.0.9">
    
    
      
        <title>OTA using Update Server - AutoConnect for ESP8266/ESP32</title>
      
    
    
      <link rel="stylesheet" href="assets/stylesheets/main.0d440cfe.min.css">
      
        
        <link rel="stylesheet" href="assets/stylesheets/palette.2505c338.min.css">
      
      

    
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="css/paragraph.css">
    
      <link rel="stylesheet" href="css/extra.css">
    
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
    
    <script>__md_scope=new URL(".",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      
  


  
  


  <script id="__analytics">function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config","G-EHK8XV10VE"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","G-EHK8XV10VE",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=G-EHK8XV10VE",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script>

  
    <script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
  

    
    
    
  </head>
  
  
    
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
  
    
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#updates-with-the-update-server" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

<header class="md-header" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="index.html" title="AutoConnect for ESP8266/ESP32" class="md-header__button md-logo" aria-label="AutoConnect for ESP8266/ESP32" data-md-component="logo">
      
  <img src="images/arduino-logo.svg" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            AutoConnect for ESP8266/ESP32
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              OTA using Update Server
            
          </span>
        </div>
      </div>
    </div>
    
    
    
      <label class="md-header__button md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="Search">
        
        <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
        </button>
      </nav>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    Hieromon/AutoConnect
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    


<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="index.html" title="AutoConnect for ESP8266/ESP32" class="md-nav__button md-logo" aria-label="AutoConnect for ESP8266/ESP32" data-md-component="logo">
      
  <img src="images/arduino-logo.svg" alt="logo">

    </a>
    AutoConnect for ESP8266/ESP32
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    Hieromon/AutoConnect
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="index.html" class="md-nav__link">
        Overview
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="gettingstarted.html" class="md-nav__link">
        Getting started
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="menu.html" class="md-nav__link">
        AutoConnect menu
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="basicusage.html" class="md-nav__link">
        Basic usage
      </a>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
      
      
      
        <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
          Advanced usage
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_5">
          <span class="md-nav__icon md-icon"></span>
          Advanced usage
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="advancedusage.html" class="md-nav__link">
        Advanced usage
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adconnection.html" class="md-nav__link">
        AutoConnect WiFi connection control
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adcpcontrol.html" class="md-nav__link">
        Captive portal control
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adnetwork.html" class="md-nav__link">
        Settings and controls for network and WiFi
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adauthentication.html" class="md-nav__link">
        Authentication settings
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adcredential.html" class="md-nav__link">
        Credential accesses
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adexterior.html" class="md-nav__link">
        Customizing page appearance
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adothers.html" class="md-nav__link">
        Other operation settings and controls
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
      
      
      
        <label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
          Custom Web pages
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_6">
          <span class="md-nav__icon md-icon"></span>
          Custom Web pages
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acintro.html" class="md-nav__link">
        Custom Web pages with AutoConnect
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acelements.html" class="md-nav__link">
        AutoConnectElements
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acjson.html" class="md-nav__link">
        Custom Web pages with JSON
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="achandling.html" class="md-nav__link">
        Handling the custom Web pages
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acinteract.html" class="md-nav__link">
        Interact between Sketch and AutoConnectElements
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
    
  
  
    
    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" checked>
      
      
      
        <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
          OTA Updates
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="true">
        <label class="md-nav__title" for="__nav_7">
          <span class="md-nav__icon md-icon"></span>
          OTA Updates
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="otaupdate.html" class="md-nav__link">
        OTA Updates
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="otabrowser.html" class="md-nav__link">
        OTA via Web Browser
      </a>
    </li>
  

            
          
            
              
  
  
    
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          OTA using Update Server
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="otaserver.html" class="md-nav__link md-nav__link--active">
        OTA using Update Server
      </a>
      
        

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#updates-with-the-update-server" class="md-nav__link">
    Updates with the update server
  </a>
  
    <nav class="md-nav" aria-label="Updates with the update server">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#how-to-embed-autoconnectupdate-to-your-sketch" class="md-nav__link">
     How to embed AutoConnectUpdate to your sketch
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#behavior-of-the-autoconnectupdate-class" class="md-nav__link">
     Behavior of the AutoConnectUpdate class
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#update-server-for-the-autoconnectupdate-class" class="md-nav__link">
     Update server for the AutoConnectUpdate class
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#http-contents-and-the-sequence-for-the-autoconnectupdate-class" class="md-nav__link">
     HTTP contents and the sequence for the AutoConnectUpdate class
  </a>
  
    <nav class="md-nav" aria-label=" HTTP contents and the sequence for the AutoConnectUpdate class">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#1-http-url-query-for-the-catalog-list-of-the-updatable" class="md-nav__link">
    1. HTTP URL query for the catalog list of the updatable
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#2-the-catalog-list-content" class="md-nav__link">
    2. The catalog list content
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#3-the-binary-sketch-file-used-for-updating" class="md-nav__link">
    3. The binary sketch file used for updating
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="filesystem.html" class="md-nav__link">
        Using Filesystem
      </a>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_9" >
      
      
      
        <label class="md-nav__link" for="__nav_9" id="__nav_9_label" tabindex="0">
          Library APIs
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_9_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_9">
          <span class="md-nav__icon md-icon"></span>
          Library APIs
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="api.html" class="md-nav__link">
        AutoConnect API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apiaux.html" class="md-nav__link">
        AutoConnectAux API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apiconfig.html" class="md-nav__link">
        AutoConnectConfig API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apielements.html" class="md-nav__link">
        AutoConnectElements API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apiupdate.html" class="md-nav__link">
        AutoConnectUpdate API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apiextra.html" class="md-nav__link">
        Something extra
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_10" >
      
      
      
        <label class="md-nav__link" for="__nav_10" id="__nav_10_label" tabindex="0">
          Examples
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_10_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_10">
          <span class="md-nav__icon md-icon"></span>
          Examples
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="howtoembed.html" class="md-nav__link">
        How to embed
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="datatips.html" class="md-nav__link">
        Tips for data conversion
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="menuize.html" class="md-nav__link">
        Attach the menus
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="wojson.html" class="md-nav__link">
        Custom Web pages w/o JSON
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="esp32cam.html" class="md-nav__link">
        Works with ESP32-CAM
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_11" >
      
      
      
        <label class="md-nav__link" for="__nav_11" id="__nav_11_label" tabindex="0">
          Appendix
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_11_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_11">
          <span class="md-nav__icon md-icon"></span>
          Appendix
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="lsbegin.html" class="md-nav__link">
        Inside AutoConnect::begin
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="credit.html" class="md-nav__link">
        Saved credentials access
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acupload.html" class="md-nav__link">
        File upload handler
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="colorized.html" class="md-nav__link">
        Custom colorized
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="changelabel.html" class="md-nav__link">
        Change label text
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="faq.html" class="md-nav__link">
        FAQ
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="changelog.html" class="md-nav__link">
        Change log
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="license.html" class="md-nav__link">
        License
      </a>
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#updates-with-the-update-server" class="md-nav__link">
    Updates with the update server
  </a>
  
    <nav class="md-nav" aria-label="Updates with the update server">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#how-to-embed-autoconnectupdate-to-your-sketch" class="md-nav__link">
     How to embed AutoConnectUpdate to your sketch
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#behavior-of-the-autoconnectupdate-class" class="md-nav__link">
     Behavior of the AutoConnectUpdate class
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#update-server-for-the-autoconnectupdate-class" class="md-nav__link">
     Update server for the AutoConnectUpdate class
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#http-contents-and-the-sequence-for-the-autoconnectupdate-class" class="md-nav__link">
     HTTP contents and the sequence for the AutoConnectUpdate class
  </a>
  
    <nav class="md-nav" aria-label=" HTTP contents and the sequence for the AutoConnectUpdate class">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#1-http-url-query-for-the-catalog-list-of-the-updatable" class="md-nav__link">
    1. HTTP URL query for the catalog list of the updatable
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#2-the-catalog-list-content" class="md-nav__link">
    2. The catalog list content
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#3-the-binary-sketch-file-used-for-updating" class="md-nav__link">
    3. The binary sketch file used for updating
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  



  <h1>OTA using Update Server</h1>

<h2 id="updates-with-the-update-server">Updates with the update server<a class="headerlink" href="#updates-with-the-update-server" title="Permanent link">&para;</a></h2>
<p>Since the v1.0.0 release, AutoConnect provides new feature for updating sketch firmware of ESP8266 or ESP32 modules via OTA using the <a href="apiupdate.html#autoconnectupdate">AutoConnectUpdate</a> class that is an implementation of the Sketch binary update by the HTTP server mentioned in the <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#http-server">OTA update</a> of the ESP8266 Arduino Core documentation, which inherits from the ESP8266HTTPUpdate class (as HTTPUpdate class in the case of ESP32). It acts as a client agent for a series of update operations.</p>
<p>This method allows you to remotely update the ESP module's firmware beyond the network segments from the update server, as long as you can ensure proper routing and forwarding.</p>
<p><img src="images/updateserver.png" width="380" /></p>
<p>If you choose this update method, you need to prepare the server process as a variant of the HTTP server that supplies the binary sketch files to the updating client agent. Its server requires to be able to handle the HTTP headers extended by ESP8266HTTPUpdate class as described in the <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#server-request-handling">ESP8266 Arduino Core documentation</a>. There are various implementations of the update server that provide binary sketch files. For example, the ESP8266 Arduino Core documentation suggests an <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#id5">advanced updater</a> php script that can be fully communicated with the client agent using the ESP8266HTTPUpdate class.  That is, the update server for AutoConnect must work with the client agent, and its implementation should make the handshake well with the AutoConnectUpdate class which wraps an ESP8266HTTPUpdate class.<br />
The AutoConnect library provides an update server script implemented in Python that can combine with the AutoConnectUpdate class.</p>
<h3 id="how-to-embed-autoconnectupdate-to-your-sketch"><i class="fa fa-edit"></i> How to embed AutoConnectUpdate to your sketch<a class="headerlink" href="#how-to-embed-autoconnectupdate-to-your-sketch" title="Permanent link">&para;</a></h3>
<p>To embed the AutoConnectUpdate class into your sketch, basically follow these steps:</p>
<ol>
<li>Declare an ESP8266WebServer object. (In ESP32, as WebServer)</li>
<li>Declare an AutoConnect object with an ESP8266WebServer object.</li>
<li>Declare an <a href="apiupdate.html">AutoConnectUpdate</a> object with the update server address and the HTTP port as parameters.</li>
<li>Invokes <a href="api.html#begin">AutoConnect::begin</a> function.</li>
<li>Attach the AutoConnectUpdate object to AutoConnect using <a href="apiupdate.html#attach">AutoConnectUpdate::attach</a> function.</li>
<li>Invokes <a href="api.html#handleclient">AutoConnect::handleClient</a> function in the <code>loop()</code>.</li>
</ol>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;AutoConnect.h&gt;</span>

<span style="color: #f8f8f2">ESP8266WebServer server;                          </span><span style="color: #75715e">// Step #1</span>
<span style="color: #f8f8f2">AutoConnect portal;                               </span><span style="color: #75715e">// Step #2</span>
<span style="color: #f8f8f2">AutoConnectUpdate update(</span><span style="color: #e6db74">&quot;192.168.0.100&quot;</span><span style="color: #f8f8f2">, </span><span style="color: #ae81ff">8000</span><span style="color: #f8f8f2">);  </span><span style="color: #75715e">// Step #3</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">if</span><span style="color: #f8f8f2"> (portal.begin()) {     </span><span style="color: #75715e">// Step #4</span>
<span style="color: #f8f8f2">    update.attach(portal);  </span><span style="color: #75715e">// Step #5</span>
<span style="color: #f8f8f2">  }</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  portal.handleClient();    </span><span style="color: #75715e">// Step #6</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<p><span style="display:block;margin-left:auto;margin-right:auto;width:282px;height:362px;border:1px solid lightgrey;"><img data-gifffer="images/serverupdate.gif" data-gifffer-height="360" data-gifffer-width="280" /></span></p>
<h3 id="behavior-of-the-autoconnectupdate-class"><i class="fas fa-desktop"></i> Behavior of the AutoConnectUpdate class<a class="headerlink" href="#behavior-of-the-autoconnectupdate-class" title="Permanent link">&para;</a></h3>
<p>A sketch incorporating the AutoConnectUpdate class has an extended menu item as <strong>UPDATE</strong> in the AutoConnect menu. <strong>UPDATE</strong> as menu item will be attached by the AutoConnectUpdate automatically.</p>
<p>When an UPDATE item started, its first action is requesting a <a href="#2-the-catalog-list-content">catalog list</a> of updatable binary sketch files to the <a href="#update-server-for-the-autoconnectupdate-class">update server</a>. Then the update server sends back the catalog list of stored binary sketch files to a client which is the ESP module. The AutoConnectUpdate class will display responded list to a custom Web page<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup> on the browser.</p>
<p><img align="top" src="images/updatemenu.png" width="240" />
<img style="margin-left:30px;" src="images/updatelist.png" width="240" /></p>
<p>The substance of Available firmware list is a custom Web page by AutoConnectAux, and you can select the target binary sketch file with the radio button (AutoConnectRadio). A progress bar will appear to notify the updating status once the update has begun. When the update finished, the ESP module will reset automatically to launch a new firmware.</p>
<p><img src="images/updating.png" width="240" />
<img style="margin-left:30px;" src="images/updated.png" width="240" /></p>
<p>The AutoConnectUpdate class performs the above series of operations in conjunction with the update server. All you need to do is attach the AutoConnectUpdate class to AutoConnect and execute the <a href="api.html#handleclient">AutoConnect::handleClient</a> function in the <code>loop()</code>.</p>
<h3 id="update-server-for-the-autoconnectupdate-class"><i class="fas fa-server"></i> Update server for the AutoConnectUpdate class<a class="headerlink" href="#update-server-for-the-autoconnectupdate-class" title="Permanent link">&para;</a></h3>
<p>The above series of operations using AutoConnectUpdate class requires an update server that can work with it. AutoConnect provides an update server script implemented in Python. This server script conforms to a sketch that uses the AutoConnectUpdate class as an update client agent.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup></p>
<p>In the OTA platform, you can place the update server operated by the script in a location that is reachable from the ESP module on the network.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">updateserver.py</span> <span style="color: #f8f8f2">[-h]</span> <span style="color: #f8f8f2">[--port</span> <span style="color: #f8f8f2">PORT]</span> <span style="color: #f8f8f2">[--bind</span> <span style="color: #f8f8f2">IP_ADDRESS]</span> <span style="color: #f8f8f2">[--catalog</span> <span style="color: #f8f8f2">CATALOG]</span> <span style="color: #f8f8f2">[--log</span> <span style="color: #f8f8f2">LOG_LEVEL]</span>
</code></pre></div>
<dl class="apidl">
  <dt></dt>
  <dd><span class="apidef"><strong>--help | -h</strong></span><span class="apidesc">Show help message and exit.</span>
  <dd><span class="apidef"><strong>--port | -p</strong></span><span class="apidesc">Specifies <strong>PORT</strong> number (Default: 8000)</span>
  <dd><span class="apidef"><strong>--bind | -b</strong></span><span class="apidesc">Specifies the IP address to which the update server binds. Usually, it is the host address of the update server. When multiple NICs configured, specify one of the IP addresses. (Default: HOST IP or 127.0.0.0)</span>
  <dd><span class="apidef"><strong>--catalog | -d</strong></span><span class="apidesc">Specifies the directory path on the update server that contains the binary sketch files. (Default: The current directory)</span>
  <dd><span class="apidef"><strong>--log | -l</strong></span><span class="apidesc">Specifies the level of logging output. It accepts the <a href="https://docs.python.org/3/library/logging.html?highlight=logging#logging-levels">Logging Levels</a> specified in the Python logging module.</span>
</dl>

<div class="admonition example">
<p class="admonition-title">updateserver.py usage</p>
<ol>
<li>
<p>Python<br />
   First, prepare a Python environment. It is also possible with a tiny single-board computer like the <a href="https://www.raspberrypi.org/">raspberry pi</a>. Popular distributions such as Ubuntu for Linux include Python. You can easily set up a Python 2 or 3 environment. If you are using a Mac, you already have the Python 2 environment. macOS is equipped with Python 2.7 by default. In the case of Windows OS, it is necessary to install the Python environment intentionally. Please refer to the <a href="https://wiki.python.org/moin/BeginnersGuide/Download">Python official page</a> to install Python in your environment.</p>
</li>
<li>
<p>Deploy the binary sketch files<br />
   Use the Arduino IDE to output a binary file of sketches and deploy it<sup id="fnref:3"><a class="footnote-ref" href="#fn:3">3</a></sup> under the update server. The path which specifies for the <strong>--catalog</strong> option of updateServer.py is the path of the binary sketch files you deployed.</p>
</li>
<li>
<p>Start updateserver.py<br />
   For example, to start the update server on the host with IP address 172.16.1.10 using 8080 port<sup id="fnref:4"><a class="footnote-ref" href="#fn:4">4</a></sup>, execute the following command:
  <div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">python</span> <span style="color: #f8f8f2">updateserver.py</span> <span style="color: #f8f8f2">--port</span> <span style="color: #f8f8f2">8080</span> <span style="color: #f8f8f2">--bind</span> <span style="color: #f8f8f2">172.16.1.10</span> <span style="color: #f8f8f2">--catalog</span> <span style="color: #f8f8f2">bin</span> <span style="color: #f8f8f2">--log</span> <span style="color: #f8f8f2">debug</span>
</code></pre></div>
  In this example assumes that the binary sketch files are deployed under the path <code>bin</code> from the current directory.</p>
</li>
</ol>
</div>
<div class="admonition note">
<p class="admonition-title">Limitations of the updateserver.py</p>
<p>The updateserver.py script equips only the minimum facility because it assumes a private small OTA platform without identifying individual modules and version restrictions etc. To operate a larger OTA platform, it is necessary to identify the individual ESP module and to consider version control and security.</p>
</div>
<h3 id="http-contents-and-the-sequence-for-the-autoconnectupdate-class"><i class="far fa-handshake"></i> HTTP contents and the sequence for the AutoConnectUpdate class<a class="headerlink" href="#http-contents-and-the-sequence-for-the-autoconnectupdate-class" title="Permanent link">&para;</a></h3>
<p>You can also equip an update server that works with the AutoConnectUpdate class. It can be improved more widely applicable by adding extensions such as version control and authentication to the updateserver.py script. It is necessary to understand the specifications related to HTTP data streams and sequences to enhance the update server that the AutoConnectUpdate class assumes.</p>
<p>This section describes the contents of the HTTP data stream required by the communication with AutoConnectUpdate class. To work correctly with the AutoConnectUpdate class, the update server must meet two requirements:</p>
<ul>
<li>The update server notifies the catalog list of updatable binary files which stored in the update server to the client agent. <sup id="fnref:5"><a class="footnote-ref" href="#fn:5">5</a></sup></li>
<li>Send an updating binary file and MD5 hash to a client in response to URI request (HTTP GET). <sup id="fnref:6"><a class="footnote-ref" href="#fn:6">6</a></sup></li>
</ul>
<p>Above requirements will be implemented on along the HTTP protocol. The AutoConnectUpdate class requests an update server to notify the client for a catalog list of binary sketch files using an HTTP URL query string. The specifications of the HTTP query and the contents of the catalog list to be returned are as follows:</p>
<h4 id="1-http-url-query-for-the-catalog-list-of-the-updatable">1. HTTP URL query for the catalog list of the updatable<a class="headerlink" href="#1-http-url-query-for-the-catalog-list-of-the-updatable" title="Permanent link">&para;</a></h4>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #66d9ef">[address]</span><span style="color: #f8f8f2">/_catalog</span><span style="color: #66d9ef">?</span><span style="color: #f8f8f2">op=list&amp;path=</span><span style="color: #66d9ef">[path]</span>
</code></pre></div>
<dl class="apidl">
  <dt></dt>
  <dd><span class="apidef"><strong>address</strong></span><span class="apidesc">URL of the update server</span>
  <dd><span class="apidef"><strong>/_catalog</strong></span><span class="apidesc">Request path, it is fixed.</span>
  <dd><span class="apidef"><strong>op</strong></span><span class="apidesc">Operation command for the update server. Currently, only '<strong>list</strong>' occurs.</span>
  <dd><span class="apidef"><strong>path</strong></span><span class="apidesc">Path containing the updatable binary files on the update server.</span>
</dl>

<h4 id="2-the-catalog-list-content">2. The catalog list content<a class="headerlink" href="#2-the-catalog-list-content" title="Permanent link">&para;</a></h4>
<p>The response (that is, the catalog list) to the above query from the server is the following specification in JSON format.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;name&quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">FILE_NAME</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;type&quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">FILE_TYPE</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;date&quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">FILE_TIMESTAMP_DATED</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;time&quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">FILE_TIMESTAMP_TIMED</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">  </span><span style="color: #e6db74">&quot;size&quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">:</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">FILE_SIZE</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<dl class="apidl">
  <dt></dt>
  <dd><span class="apidef"><strong>name</strong></span><span class="apidesc">Binary sketch file name for update (String)</span>
  <dd><span class="apidef"><strong>type</strong></span><span class="apidesc">One of '<strong>bin</strong>', '<strong>directory</strong>' or '<strong>file</strong>'. AutoConnect Update recognizes only file types of '<strong>bin</strong>' as update targets. (String)</span>
  <dd><span class="apidef"><strong>date</strong></span><span class="apidesc">File update date. AutoConnect v1.0.0 treats the file update date as an annotation and is not equip the version control feature yet. (String)</span>
  <dd><span class="apidef"><strong>time</strong></span><span class="apidesc">File update time. AutoConnect v1.0.0 treats the file update date as an annotation and is not equip the version control feature yet. (String)</span>
  <dd><span class="apidef"><strong>size</strong></span><span class="apidesc">File byte count (Numeric)</span>
</dl>

<p>The above JSON object is one entry. The actual catalog list is an array of this entry since it  assumes that an update server will provide multiple update binary files in production. The update server should respond with the MIME type specified as <code>application/json</code> for the catalog list.<sup id="fnref:7"><a class="footnote-ref" href="#fn:7">7</a></sup></p>
<h4 id="3-the-binary-sketch-file-used-for-updating">3. The binary sketch file used for updating<a class="headerlink" href="#3-the-binary-sketch-file-used-for-updating" title="Permanent link">&para;</a></h4>
<p>The AutoConnectUpdate class issues a HTTP GET request with the specified host address and URI. The update server responds by sending back a binary sketch file with the following header:</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">Content-Type:</span> <span style="color: #f8f8f2">application/octet-stream</span>
<span style="color: #f8f8f2">Content-Disposition:</span> <span style="color: #f8f8f2">attachment;</span> <span style="color: #f8f8f2">filename=</span><span style="color: #e6db74">&quot;BINARY_SKETCH_FILE_NAME&quot;</span>
<span style="color: #f8f8f2">Content-Length:</span> <span style="color: #f8f8f2">LENGTH_OF_CONTENT</span>
<span style="color: #f8f8f2">x-MD5:</span> <span style="color: #f8f8f2">HEXDIGEST</span>
</code></pre></div>
<p>The header <strong>x-MD5</strong> is a 128-bit hash value (digest in hexadecimal) that represents the checksum of the binary sketch file for updates required for the ESP8266HTTPUpdate class.</p>
<script>
  window.onload = function() {
    Gifffer();
  };
</script>

<div class="footnote">
<hr />
<ol>
<li id="fn:1">
<p>You can scroll horizontally on the browser to see the timestamp and file size that the catalog list contains.&#160;<a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">&#8617;</a></p>
</li>
<li id="fn:2">
<p>The folders containing the script:<br />
For Python2: <em>AUTOCONNECT_LIBRARY_PATH</em>/src/updateserver/python2<br />
For Python3: <em>AUTOCONNECT_LIBRARY_PATH</em>/src/updateserver/python3&#160;<a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">&#8617;</a></p>
</li>
<li id="fn:3">
<p>Deploying the binary sketch file output by Arduino IDE is usually just copying to the folder for deployment. However, its folder must be accessible from the updateserver.py script.&#160;<a class="footnote-backref" href="#fnref:3" title="Jump back to footnote 3 in the text">&#8617;</a></p>
</li>
<li id="fn:4">
<p>The port of the update server and the port used by the AutoConnectUpdate class must be the same.&#160;<a class="footnote-backref" href="#fnref:4" title="Jump back to footnote 4 in the text">&#8617;</a></p>
</li>
<li id="fn:5">
<p>The <strong>client agent</strong> is an instance of the AutoConnectUpdate class.&#160;<a class="footnote-backref" href="#fnref:5" title="Jump back to footnote 5 in the text">&#8617;</a></p>
</li>
<li id="fn:6">
<p>The client agent will send its URI request to the update server.&#160;<a class="footnote-backref" href="#fnref:6" title="Jump back to footnote 6 in the text">&#8617;</a></p>
</li>
<li id="fn:7">
<p>It should be represented as <code>Content-Type: application/json</code> in the HTTP response header.&#160;<a class="footnote-backref" href="#fnref:7" title="Jump back to footnote 7 in the text">&#8617;</a></p>
</li>
</ol>
</div>


  




                
              </article>
            </div>
          
          
        </div>
        
          <a href="#" class="md-top md-icon" data-md-component="top" hidden>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
            Back to top
          </a>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      Copyright &copy; 2018-2023 Hieromon Ikasamo
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
        <div class="md-social">
  
    
    
      
      
    
    <a href="https://github.com/Hieromon" target="_blank" rel="noopener" title="github.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
    </a>
  
    
    
      
      
    
    <a href="https://twitter.com/hieromon" target="_blank" rel="noopener" title="twitter.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    <script id="__config" type="application/json">{"base": ".", "features": ["navigation.top"], "search": "assets/javascripts/workers/search.db81ec45.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="assets/javascripts/bundle.a00a7c5e.min.js"></script>
      
        <script src="js/gifffer.min.js"></script>
      
    
  </body>
</html>